import { reactive } from "vue";
/**
 * @description 地图
 */
export const useWorldMap = () => {
  const options = reactive({
    backgroundColor: "#54daff", //地图背景色
    tooltip: {
      trigger: "item", // 触发类型为item
      formatter: "{b}:{c}", // 自定义提示信息格式，{b}为区域名，{c}为系列名（可空），{d}为数据值
    },
    visualMap: {
      type: "piecewise",
      show: false, //是否显示
      min: 0,
      max: 1000000,
      // inRange: {
      //   color: [
      //     '#D1EFFF',
      //     '#C8E8FF',
      //     '#7ec4ff',
      //     '#34A0FF',
      //     '#2980B9',
      //     '#1E70BF',
      //     '#0D47A1',
      //     '#0B3D91'
      //   ] // 更深的颜色表示更大的值
      // },
      // outOfRange: {
      //   color: '#fff'
      // },
      calculable: true,
      orient: "vertical", //显示形式：垂直
      left: "left", //距左
      bottom: 0,
    },
    // geo: {},
    series: [
      {
        roam: true, //是否允许缩放
        name: "",
        type: "map",
        zoom: 1.2,
        // aspectScale: 1.3, //y轴翻转比例
        map: "china",
        layoutCenter: ["50%", "30%"],
        itemStyle: {
          areaColor: "#FFF", //区块色
          borderColor: "#666", //边界色
          borderWidth: 1,
          // shadowColor: '#9bcffa',//地图阴影
          // shadowBlur: 11,
          // shadowOffsetX: 0,
          // shadowOffsetY: 8
        },
        data: [{ name: "中国", value: 95 }],
      },
    ],
  });
  return {
    options,
  };
};
